import 'package:flutter/material.dart';
import 'package:get/get.dart';
import '../../../service/HttpsClient.dart'; // 导入自定义的HttpsClient类
import '../controllers/category_controller.dart';
import '../../../utils/screenAdapter.dart';

class CategoryView extends GetView<CategoryController> {
  const CategoryView({super.key});

  // 顶部自定义导航区域
  PreferredSizeWidget _appBar() {
    return AppBar(
      backgroundColor: Colors.transparent, // 导航栏背景颜色透明
      elevation: 0, // 阴影高度为0
      title: InkWell(child: Container(
        width: ScreenAdapter.width(840),
        height: ScreenAdapter.height(96),
        decoration: BoxDecoration(
          color: Color.fromARGB(187, 244, 240, 240),
          borderRadius: BorderRadius.circular(ScreenAdapter.radius(50)),
        ),
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: [
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                IconButton(
                  onPressed: null,
                  icon: Icon(Icons.search, size: ScreenAdapter.fontSize(46)),
                  color: Color.fromARGB(187, 185, 185, 185),
                ),
                Text(
                  "搜索商品",
                  style: TextStyle(
                    fontSize: ScreenAdapter.fontSize(30),
                    color: Color.fromARGB(187, 185, 185, 185),
                  ),
                ),
              ],
            ),
          ],
        ),
      ), onTap: () {
        Get.toNamed("/search");
      },),
      actions: [
        IconButton(
          onPressed: () {},
          icon: Icon(Icons.message_outlined, size: ScreenAdapter.fontSize(60)),
          // color: Colors.orange,
        ),
      ], // 操作按钮
    );
  }

  // 左边一级分类菜单导航栏
  Widget _leftMenu() {
    return SizedBox(
      // color: Colors.pink,
      width: ScreenAdapter.width(280), // 左边菜单宽度写死，右边内容区域自适应
      height: double.infinity,
      child: Obx(
        () => ListView.builder(
          itemCount: controller.menuList.length,
          itemBuilder: (BuildContext context, int index) {
            return Container(
              width: double.infinity,
              height: ScreenAdapter.height(180),
              // padding: EdgeInsets.fromLTRB(
              //   ScreenAdapter.width(30),
              //   ScreenAdapter.height(30),
              //   ScreenAdapter.width(30),
              //   ScreenAdapter.height(30),
              // ),
              child: InkWell(
                onTap: () {
                  // print('点击了${controller.menuList[index].sId}');
                  controller.changeIndex(
                    index,
                    controller.menuList[index].sId!,
                  ); // 点击切换一级分类
                },
                child: Obx(
                  () => Stack(
                    children: [
                      Align(
                        alignment: Alignment.centerLeft,
                        child: Container(
                          width: ScreenAdapter.width(10),
                          height: ScreenAdapter.height(50),
                          color: controller.selectIndex.value == index
                              ? Colors.orange
                              : Colors.white,
                        ),
                      ),
                      Center(
                        child: Text(
                          '${controller.menuList[index].title}',
                          style: TextStyle(
                            fontSize: ScreenAdapter.fontSize(36),
                            fontWeight: controller.selectIndex.value == index
                                ? FontWeight.bold
                                : FontWeight.normal,
                          ),
                        ),
                      ),
                    ],
                  ),
                ),
              ),
            );
          },
        ),
      ),
    );
  }

  // 右边展示内容区域
  Widget _rightContent() {
    return Expanded(
      flex: 1,
      child: SizedBox(
        // color: Colors.green,
        child: Obx(
          () => GridView.builder(
            gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
              crossAxisCount: 3, // 每行显示3个
              mainAxisSpacing: ScreenAdapter.height(20),
              crossAxisSpacing: ScreenAdapter.width(20),
              childAspectRatio: 0.8, // 宽高比
            ),
            itemCount: controller.selectedList.length,
            itemBuilder: (context, index) {
              return InkWell(onTap: () => Get.toNamed('/productlist', arguments: {"cid": controller.selectedList[index].sId}), child: Column(
                children: [
                  SizedBox(
                    width: ScreenAdapter.width(200),
                    child: Image.network(
                      HttpsClient.getImgUrl(
                        controller.selectedList[index].pic!,
                      ),
                      fit: BoxFit.cover,
                    ),
                  ),
                  Padding(
                    padding: EdgeInsets.only(top: ScreenAdapter.height(40)),
                    child: Text("${controller.selectedList[index].title}"),
                  ),
                ],
              ),);
            },
          ),
        ), // // 一个Obx只能监听一个状态
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      appBar: _appBar(),
      body: Row(children: [_leftMenu(), _rightContent()]),
    );
  }
}
